<template>
  <a-modal v-model:open="open"
           width="80%"
           :footer="null"
           style="top:100px"
           :title="formState.id?'修改参数':'添加参数'"
           :keyboard="false"
           :mask-closable="false"
           @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        class="mt20"
        layout="horizontal"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '150px' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row class="flex justify-center">
        <a-col :span="18">
          <a-form-item
              label="参数名称"
              name="title"
          >
            <a-input v-model:value.trim="formState.title" maxlength="100" placeholder="请输入参数名称"/>
          </a-form-item>

          <a-form-item
              label="参数编号"
              name="code"
          >
            <a-input v-model:value.trim="formState.code" maxlength="100"
                     placeholder="请输入参数编号(英文名字，建议大写)"/>
          </a-form-item>

          <a-form-item
              label="参数值"
          >
            <div class="flex flex-wrap">
              <template v-for="(tagname,index) in tagsList"  :key="index">
                <a-input-search
                    v-model:value="tagsList[index]"
                    placeholder="请填写"
                    class="mb10 mr10"
                    size="small"
                    style="width: 150px"
                >
                  <template #enterButton>
                    <a-button danger type="primary" size="small" @click="handleDelTag(index)">删除</a-button>
                  </template>
                </a-input-search>
              </template>
              <a-button type="primary" size="small" @click="handleAddTag">添加参数</a-button>
            </div>
          </a-form-item>
          <a-form-item>
            <a-button style="margin-left: 150px" type="primary" @click.stop.prevent="onSubmit">
              <EditOutlined v-if="formState.id "></EditOutlined>
              <PlusOutlined v-else></PlusOutlined>
              {{ formState.id ? '更新参数' : '保存参数' }}
            </a-button>
            <a-button style="margin-left: 10px" danger type="primary" @click.stop.prevent="handleClose">
              <close-outlined></close-outlined>
              关闭
            </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script setup>
const open = ref(false);
const tagsList = ref([])
const formRef = ref({})
const emits = defineEmits(["success"])
const userStore = useStore.userState()
const formState = ref({
  title: '',
  code: '',
  status: 1,
  pvalue: ""
});

// 验证规则
const rules = {
  title: [{required: true, message: '请输入参数名称', trigger: 'blur'}],
  code: [{required: true, message: '请输入参数编号', trigger: 'blur'}]
};

const handleAddTag = ()=>{
  tagsList.value.push("")
}

const handleDelTag = (index)=>{
  tagsList.value.splice(index,1)
}

const onSubmit = async () => {
    formRef.value.validate().then(async (res) => {
      if(tagsList.value && tagsList.value.length == 0){
        useMessage().error("请添加参数值")
        return
      }
      formState.value.pvalue = JSON.stringify(tagsList.value.map(c=>({'name':c})))
      try {
        await useSaveUpdateSysParameterApi(formState.value)
        userStore.setParameterList()
        useMessage().success("操作成功")
        handleClose()
        emits("success")
      } catch (e) {
        useMessage().error(e.msg)
      }
    })
};

const handleOpen = async (record) => {
  open.value = true
  if (record && record.id) {
    const resp = await useGetSysParameterApi(record.id)
    formState.value = resp.data
    tagsList.value = JSON.parse(resp.data.pvalue).map(c=>c.name)
  }
}

const handleClose = () => {
  open.value = false
  tagsList.value = []
  formRef.value.clearValidate()
  formRef.value.resetFields()
  formState.value = {
    id: "",
    title: '',
    code: '',
    status: 1,
    value: ""
  }
}

defineExpose({
  handleOpen,
})

</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>